<template>
    <div>
        <div class="container">
            <div class="my_analysis">
                <div class="return_button"  @click="this.$router.back()">
                    <img src="@/assets/img/返回箭头1.png" width="35" alt="">
                    <p class="return_p">返回</p>
                </div>
                <div class="my_analysis_title">
                    <strong>| </strong>
                    <p>报告详情</p>
                    <div>性 格 分 析 报 告</div>
                </div>
                <div class="report_container1">
                    <div class="report_container2">
                        <div class="report_div">
                            <img src="@/assets/img/花1.png" width="35" alt="">
                            <p class="report_p">上传图片</p>
                        </div>
                        <el-divider></el-divider>
                        <div class="report_main_title">
                            <div class="report_main_title_div">
                                <p>客户姓名：{{report.name}}</p>
                                <p>性别：{{report.sex}}</p>
                                <p>年龄：{{report.age}}</p>
                            </div>
                            <div><p>鉴定时间：{{report.time}}</p></div>
                        </div>
                        <el-divider></el-divider>
                        <div v-if="report.preface !==''">
                            <div class="report_div">
                                <img src="@/assets/img/星球1.png" width="35" alt="">
                                <p class="report_p">前言</p>
                            </div>
                            <div class="report_main_content">
                                {{report.preface}}
                            </div>
                        </div>
                        <div v-if="report.characterAnalysis !==''">
                            <div class="report_div">
                                <img src="@/assets/img/性格分析1.png" width="35" alt="">
                                <p class="report_p">性格分析</p>
                            </div>
                            <div class="report_main_content">
                                {{report.characterAnalysis}}
                            </div>
                        </div>
                        <div v-if="report.cardIdentification !==''">
                            <div class="report_div">
                                <img src="@/assets/img/卡氏测定1.png" width="35" alt="">
                                <p class="report_p">卡氏测定</p>
                                <el-tooltip placement="top" class="report_p">
                                    <template #content>
                                        从乐群、聪慧、自律、独立、敏感、冒险、怀疑等16个<br/>
                                        相对独立的人格特点对人进行描绘，并可以了解应试者<br/>
                                        在环境适应、专业城就和心理建康等方面的表现。在人<br/>
                                        事管理中，16PF能够预现应试者的工作稳定性、工作效<br/>
                                        率和压力承受能力等。可广泛应用于心理咨询、人员选<br/>
                                        拔和职业指导的各个环节，为人事决策和人事诊断提供<br/>
                                        个人心理素质的参考依据。
                                    </template>
                                    <i class="el-icon-warning-outline"></i>
                                </el-tooltip>
                            </div>
                            <div class="report_main_content">
                                {{report.cardIdentification}}
                            </div>
                        </div>

                        <div v-if="report.noteCharacteristics !==''">
                            <div class="report_div">
                                <img src="@/assets/img/笔迹特征1.png" width="35" alt="">
                                <p class="report_p">笔迹特征</p>
                            </div>
                            <div class="report_main_content">
                                {{report.noteCharacteristics}}
                            </div>
                        </div>

                        <div v-if="report.careerAdvice !==''">
                            <div class="report_div">
                                <img src="@/assets/img/职业建议1.png" width="35" alt="">
                                <p class="report_p">职业建议</p>
                            </div>
                            <div class="report_main_content">
                                {{report.careerAdvice}}
                            </div>
                        </div>


                        <div class="image_footer">
                            <el-button @click="download(report.reportLink)" class="my_button_size" type="primary">下 载</el-button>
                            <el-button @click="this.$router.back()" class="my_button my_button_size" type="primary">返 回</el-button>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

</template>

<script>
    import api from '@/api'

    export default {
        name: "AnalysisReport",
        data() {
            return {
                report: {
                    id: "",
                    name: "##",
                    sex: "#",
                    age: "#",
                    time: "2021-09-23",
                    preface: "####1",
                    characterAnalysis: "####2",
                    cardIdentification: "####3",
                    noteCharacteristics: "####4",
                    careerAdvice: "####5",
                    reportLink: "https://bluedot-a.oss-cn-hangzhou.aliyuncs.com/bluedot/report/2021/10/29/b2941452a95e00d8.docx",
                }
            };
        },
        methods: {
            download(val) {
                window.open(val, '_blank')
            },
            repeatAnalysis() {
                //再 次 分 析
                let array = [{id: this.report.id}]
                api.repeatAnalysis(array).then(res => {
                    //返回数据或者跳转页面
                    this.$message.success("分析成功");
                }).catch(() => {
                    this.$message.error("分析失败");
                });
            },
            getReprot() {
                //根据reportId查找数据并赋值
                this.report = this.$route.params;
            },
        },
        created() {
            //初始化,根据reportId查找数据并赋值
            this.getReprot();
        },
    }
</script>

<style scoped>
    .my_analysis{
        font-size: 21px;
    }
    .return_button{
        /*display: inline-block;*/
        float: left;
        margin-top: 10px;
    }
    .return_button:hover{
        cursor: pointer;
    }
    .return_p{
        vertical-align: 10px;
        margin-left: 2px;
        display: inline-block;
    }
    .my_analysis_title {
        /*display: inline-block;*/
        margin-left: 150px;
    }

    .my_analysis > div > strong {
        font-size: 40px;
        color: #01A7F0;
    }

    .my_analysis_title > p {
        display: inline-block;
        font-size: 25px;
        vertical-align: 1px;
        color: #01A7F0;
    }

    .my_analysis_title > div {
        display: inline-block;
        font-size: 30px;
        font-weight: bold;
        margin-left: 28%;
    }

    .report_container1 {
        margin: 20px 150px 50px 150px;
        background: #f5f5f5;
        padding: 20px;
        border: 2px solid #ddd;
        border-radius: 2%;
    }

    .report_container2 {
        border: 2px solid #ddd;
        border-radius: 2%;
    }

    .report_div {
        margin: 15px;
    }

    .report_p {
        font-weight: bold;
        vertical-align: 9px;
        margin-left: 8px;
        display: inline-block;
    }

    .report_main_title {
        text-align: center;
        margin: 30px 0;
    }

    .report_main_title >div>p{
        display: inline-block;
    }
    .report_main_title_div>p{
        margin-left: 70px;
    }
    .report_main_content{
        margin: 15px;
        padding: 5px;
        height: 200px;
        border: 2px solid #ddd;
        border-radius: 1%;
    }
    .image_footer {
        text-align: center;
        margin-bottom: 50px;
    }

    .my_button {
        margin-left: 100px;
    }
    .my_button_size{
        width: 200px;
    }
</style>